<template>
     <div id="BackupLog">
          <div>
               <div class="broad">
                    <el-breadcrumb separator=">">
                         <el-breadcrumb-item>数据备份管理</el-breadcrumb-item>
                         <el-breadcrumb-item>备份日志</el-breadcrumb-item>
                    </el-breadcrumb>
               </div>
          </div>
          <div class="searchBar demo-input-suffix">
               <span>备份名称</span>
               <el-input
                       size="mini"
                       width="100" >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
               </el-input>
               <span class="margin_left">备份类型</span>
               <el-input size="mini"
               >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
               </el-input>
               <!--                    <span class="margin_left">职务</span>-->
               <!--                    <el-input size="mini"-->
               <!--                              v-model="post">-->
               <!--                        <i slot="prefix" class="el-input__icon el-icon-search"></i>-->
               <!--                    </el-input>-->
               <span class="margin_left">执行方式</span>
               <el-input size="mini"
               >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
               </el-input>
               <el-button type="primary" plain
                          size="mini"   icon="el-icon-search">
                    查找
               </el-button>
               <el-button type="primary" plain
                          size="mini"   icon="el-icon-refresh">
                    重置
               </el-button>
          </div>
          <div id="thebackuplog">
               <template>
                    <el-table
                            :data="backupRecoveryLogTable"
                            border
                            :stripe="true"
                            style="width: 100%"
                    >

                         <el-table-column
                                 fixed
                                 prop="id"
                                 label="序号"
                                 width="80">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXBH"
                                 label="备份名称"
                                 width="240">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXMM"
                                 label="启动时间"
                                 width="200">
                         </el-table-column>
                         <el-table-column
                                 prop="District"
                                 label="结束时间"
                                 width="200">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXLX"
                                 label="执行时间（毫秒）"
                                 width="200">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXLXBM"
                                 label="执行结果"
                                 width="200">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXLXBM"
                                 label="执行方式"
                                 width="200">
                         </el-table-column>
                         <el-table-column
                                 prop="STHXLXBM"
                                 label="异常描述"
                                 width="190">
                         </el-table-column>
                         <el-table-column
                                 fixed="right"
                                 label="详情">
                              <template slot-scope="scope">
                                   <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-view"></i>详情</el-button>
                              </template>
                         </el-table-column>
                    </el-table>
               </template>
          </div>
     </div>
</template>

<script>
     export default {
          name: "TheBackupRecovery",
       data(){
         return{
           backupRecoveryLogTable:[]
         }
       },
          methods:{
               // handleClick(row) {
               //     console.log(row);
               // },
               // handleEdit(index, row) {
               //     console.log(index, row);
               // },
               // handleDelete(index, row) {
               //     console.log(index, row);
               //
               // },
          }
     }
</script>

<style scoped>
     #BackupLog{
          position: absolute;
          left: 15%;
          height: 90%;
          width: 85%;
          background-color: #ffffff;
     }
     .broad{
          width: 100%;
          position: fixed;
          display: inline-block;
          padding: 15px;
          color: black;
          font-size: 20px;
          border-bottom: 2px solid #e9eef3;
          background-color: #ffffff;
     }
     .searchBar{
          display: inline-block;
          /*margin-left: 80px;*/
     }
     .searchBar > span{
          padding: 10px;
          font-size: 14px;
     }
     .el-input{
          width: 15%!important;
     }
     .demo-input-suffix{

       position: absolute;
       top: 50px;
       /*display: none;*/
       background-color: #ffffff;
       padding: 1%;
       width: 98%;

     }
     .el-button{
          margin-left: 20px;
          font-size: 14px!important;
     }
     .el-button+.el-button {
          margin-left: 10px;
     }
     #backup{
          position: absolute;
          left: 80%;
          display: inline-block;
     }
     #thebackuplog{
          position: absolute;
          top: 110px;
          width: 98%;
          padding: 1%;
     }
     /deep/ .cell{
          text-align: center;
     }
     /deep/ .el-table td{
          padding: 7px 0 ;
     }



</style>
